import React from 'react'
import { Spin, Row, Col } from 'antd'
import {messages} from "share/common";
import { connect } from 'react-redux';
import Charts from 'components/echarts'
import dashboardService from "containers/dashboard/dashboard.service";
import menuRoute from "routes/menuRoute";
import qs from 'querystring'
import CardTitle from "containers/dashboard/dashboard-component/card-title"
import NullCard from "./null-card";
import moment from 'moment';

class WaitSubmit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      load: false,
      waitForApprove: [],
      waitForApproveNum: 0,
      options: {}
    }
  }

  componentDidMount() {
    this.getWaitSubmit();
  }

  getWaitSubmit = () => {
    const { profile } = this.props;
    let params = {
      tag: 'submitting',
      entityType: [3001],
      page: 0,
      size: 999,
      // beginDate: moment().subtract(3, 'months').format('YYYY-MM-DD'),
      // endDate: moment().format('YYYY-MM-DD'),
      sort: 'submittedDate,DESC'
    };
    if (!profile['er.opt.approval.disabled']) {
      params.entityType.push(1002);
    }
    if (!profile['ca.opt.approval.web.disabled']) {
      params.entityType.push(1001);
    }
    this.setState({load: true});
    dashboardService.getToSubmitList(params).then(res => {
      let waitForApprove = [];
      let waitForApproveNum = 0;
      let num1001 = 0;
      let num1002 = 0;
      let num3001 = 0;
      // let num4001 = 0;
      res.data.map((item) => {
        if (item.entityType === 1002) {
          num1002++
        }
        if (item.entityType === 1001) {
          num1001++
        }
        if (item.entityType === 3001) {
          num3001++
        }
        // if (item.entityType === 4001) {
        //   num4001++
        // }
      });
      waitForApprove = [
        { value: num1001, entityType: 1001, name: messages('dashboard.key19'/*申请单*/)},
        { value: num1002, entityType: 1002, name: messages('dashboard.key18'/*报销单*/)},
        { value: num3001, entityType: 3001, name: messages('dashboard.key116')/*借款单*/},
        // { value: num4001, entityType: 4001, name: messages('dashboard.key142')/*其他单*/},
      ]
      waitForApproveNum = waitForApprove.reduce((pre, now) => now.value + pre, 0);
      this.setState({
        load: false,
        waitForApprove,
        waitForApproveNum
      }, () => {
        const options = {
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          series: [
            {
              name:'待提交单据',
              type:'pie',
              radius: ['50%', '64%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              label: {
                show: true,
                position: 'center',
                formatter: function(params){
                  return `{a|${messages('dashboard.key153')/*总数*/}}\n{b|${waitForApproveNum}}`
                },
                color: "#999999",
                rich: {
                  a: {
                    color: '#999999',
                    fontSize: 12,
                    lineHeight: 16
                  },
                  b: {
                    color: '#666666',
                    fontSize: 18,
                    fontWeight: 600
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: waitForApprove
            }
          ]
        };
        this.setState({options});
        if(document.getElementsByClassName("chart-legend-submit")[0]){
          let dom = document.getElementsByClassName("chart-legend-submit")[0].childNodes;
          for(let i=0; i<dom.length; i++){
            dom[i].onclick = (e) => {
              e.stopPropagation();
              let url = menuRoute.getRouteItem('to-be-submit').url
              const entityType = dom[i].getAttribute('data-entity-type')
              url += `?${qs.stringify({ entityType, submitType: true })}`
              window.open((window.ISIE9 ? '#' : '') + url, '_blank');
              return false;
            };
          }
        }
      })
    })
  };

  render() {
    const { load, options, waitForApprove, waitForApproveNum } = this.state;
    const { removeModule } = this.props;
    let color = [
      "#4B8DFF",
      "#FF6680",
      "#4DC690",
      "#F2C849",
      // "#FF6680",
    ];
    return (
      <Spin spinning={load}>
        <CardTitle  cardKey={"3"}
                    title={messages('components.key1339'/*等待您提交的单据*/)}
                    removeModule={(key) => removeModule(key)}
                    reloadModule={this.getWaitSubmit}/>
        <div className="card-content">
          {
            waitForApproveNum ? (
              <Row>
                <Col span={12} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                  <Charts options={options} height={140} className="echarts" />
                </Col>
                <Col span={12}>
                  <ul className="chart-legend-submit">
                    {
                      waitForApprove.map((item, index) => {
                        return(
                          <li className="legend-list" data-entity-type={item.entityType}>
                            <span className="legend-marker" style={{backgroundColor: color[index]}} />
                            <span className="legend-text">{item.name}&nbsp;&nbsp;<span>{item.value}</span></span>
                          </li>
                        )
                      })
                    }
                  </ul>
                </Col>
              </Row>
            ) : (
              <NullCard imgType={"waitApprove"} message={messages('dashboard.key193')/*太棒啦！审批全部完成！*/}/>
            )
          }
        </div>
      </Spin>
    )
  }
}

WaitSubmit.propTypes = {
  removeModule: React.PropTypes.func.isRequired
};

WaitSubmit.defaultProps={
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile
  }
}

export default connect(mapStateToProps)(WaitSubmit)
